import React, { useState, useEffect, useCallback } from 'react'
import style from './style/CardBodyRecommend.css'
import { Link, withRouter } from 'react-router-dom'
import { recommendResourceReq } from '@/utils/api/recommend'

const CardBodyRecommend = ({history}) => {
  const [recommendList, setRecommendList] = useState([])

  useEffect(() => {
    const getData = async () => {
      const res = await recommendResourceReq()
      if (res.data.code === 200) {
        let list = res.data.recommend.splice(0, 8)
        setRecommendList(list)
      }
      
    }
    getData()
  }, [])

  const playsong = useCallback((item) => {
    if (item.type == 1) {
      history.push(`song/${item.id}/3`)
    }else{
      alert('暂未开发')
    }
  }, [])

  return <div className={style.cardBody}>
    <div className={style.recommendList}>
      {recommendList ? recommendList.map(item => {
        return <div className={style.recommendItem} key={item.id} onClick={() => playsong(item)}>
          <div className={style.reTop}>
            <div className={[style.mask_na, style.reBottom_cover].join(' ')}>
            </div>
            <img src={item.picUrl} alt={item.id} />
            <div className={style.reTop_btm}>
              <svg t="1605951006905" viewBox="0 0 1200 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9153" width="20" height="20"><path d="M602.270034 5.424254C292.954175 5.424254 42.238043 256.184847 42.238043 565.411784v315.00688a140.007998 140.007998 0 1 0 280.015996 0V670.473359a140.007998 140.007998 0 0 0-140.052459-140.007998 138.718626 138.718626 0 0 0-69.181469 18.984889c8.536531-263.120778 223.995012-473.955305 489.249923-473.955305 265.165989 0 480.62447 210.834527 489.161001 473.955305a138.763087 138.763087 0 0 0-69.181468-18.984889 139.963537 139.963537 0 0 0-139.963537 140.007998v209.989766a139.963537 139.963537 0 1 0 279.971534 0v-315.00688c0-309.226937-250.760593-559.98753-559.98753-559.98753zM182.246041 600.402668c38.681155 0 69.981768 31.345074 69.981768 70.02623v209.989766a69.981768 69.981768 0 0 1-140.007997 0V670.473359c0-38.681155 31.300613-70.026229 70.026229-70.02623z m910.029755 280.015996a70.026229 70.026229 0 0 1-140.007998 0v-209.989766a69.981768 69.981768 0 1 1 140.007998 0v209.989766z" p-id="9154" fill="#e6e6e6"></path></svg>
              <div className={style.reTop_title}>{parseFloat(item.playcount / 10000).toFixed(0)}万</div>
              <svg t="1605951042816" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10763" width="20" height="20"><path d="M512 0c282.768 0 512 229.232 512 512 0 282.768-229.232 512-512 512C229.232 1024 0 794.768 0 512 0 229.232 229.232 0 512 0z m0 96C282.24 96 96 282.24 96 512s186.24 416 416 416 416-186.24 416-416S741.76 96 512 96z m-96 205.152a16 16 0 0 1 8.592 2.496l306.192 194.848a16 16 0 0 1 0 27.008L424.592 720.352A16 16 0 0 1 400 706.848V317.152a16 16 0 0 1 16-16z" p-id="10764" fill="#e6e6e6"></path></svg>
            </div>
          </div>
          <Link className={style.reBottom} to="/#">
            {/* {item.id%3 == 0 ? 
              <div className={style.reB_dj}>电台节目</div>
            // <svg t="1606981301659" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6022" width="20" height="20"><path d="M424.43363 1020.154126h-0.006394A387.090606 387.090606 0 0 1 237.446773 971.858512c-58.84859-32.579638-108.359027-80.450064-143.166907-138.432294-109.187025-181.855827-50.063501-418.637645 131.792327-527.818276 59.855615-35.936387 128.208598-54.932384 197.667709-54.932384 65.24879 0 129.90935 16.703818 186.980463 48.295614 58.851787 32.579638 108.362224 80.446867 143.170104 138.432293 52.89276 88.097056 68.311423 191.513671 43.417139 291.205895-24.891087 99.692223-87.118804 183.722819-175.212662 236.612381-59.852418 35.936387-128.208598 54.932384-197.661316 54.932385z m-0.693728-724.721926c-61.345372 0-121.731672 16.786938-174.62763 48.548169-160.70192 96.479336-212.942512 305.710243-116.466373 466.408966 62.032706 103.320708 171.107839 165.008148 291.781337 165.011346 61.342175 0 121.731672-16.786938 174.630827-48.548169 160.698723-96.482533 212.942512-305.710243 116.466373-466.408967-62.0391-103.323905-171.114233-165.011345-291.784534-165.011345z m0.450763 472.914664c-46.460591 0-90.165452-24.721651-114.059105-64.516699-18.273498-30.437713-23.599538-66.172695-14.999869-100.616129 8.599669-34.443433 30.102039-63.477706 60.539752-81.7544a132.776972 132.776972 0 0 1 68.311424-18.976816c46.460591 0 90.165452 24.718454 114.055908 64.513502 18.276694 30.437713 23.602735 66.172695 15.003066 100.619325-8.599669 34.443433-30.102039 63.477706-60.539752 81.754401a132.786563 132.786563 0 0 1-68.311424 18.976816z m-0.210995-221.104205a87.978771 87.978771 0 0 0-45.271344 12.592601c-20.188442 12.119459-34.449827 31.374406-40.156298 54.219474-5.703275 22.845069-2.170697 46.550105 9.951959 66.735351 16.086816 26.799638 44.382604 42.800137 75.683481 42.800137a87.978771 87.978771 0 0 0 45.271344-12.592601c20.188442-12.119459 34.449827-31.374406 40.156298-54.222672s2.170697-46.546908-9.951959-66.73535c-16.086816-26.799638-44.379407-42.79694-75.683481-42.79694z" fill="#C20C0C" p-id="6023"></path><path d="M424.117137 693.734345c-20.37706 0-39.54569-10.847092-50.025139-28.302182-16.54717-27.566895-7.583054-63.458525 19.977447-80.008892a58.253966 58.253966 0 0 1 29.983753-8.324735c20.37706 0 39.54569 10.847092 50.025139 28.305379a57.921489 57.921489 0 0 1 6.582423 44.13964 57.953458 57.953458 0 0 1-26.55987 35.869251 58.292329 58.292329 0 0 1-29.983753 8.321539z m-0.063939-71.879167a13.299116 13.299116 0 0 0-6.943673 1.94052 13.570853 13.570853 0 0 0-4.641903 18.599582 13.471749 13.471749 0 0 0 11.652711 6.582423 13.299116 13.299116 0 0 0 6.943674-1.94052c3.10739-1.863794 5.297268-4.824127 6.176416-8.334326s0.332478-7.154669-1.531316-10.255665a13.48134 13.48134 0 0 0-11.655909-6.592014zM980.691555 540.99591l0.012788-0.019181c0.418794-0.585033 0.808816-1.182854 1.166869-1.799857 0.163042-0.278131 0.297312-0.569049 0.447567-0.853573 0.182223-0.348462 0.374038-0.693728 0.540276-1.048584 0.182223-0.396416 0.332478-0.799226 0.489126-1.202035 0.102301-0.265343 0.220586-0.524292 0.313297-0.792832 0.147058-0.421991 0.262146-0.847179 0.383628-1.275565 0.076726-0.26854 0.163042-0.533883 0.230177-0.802422 0.095907-0.393219 0.163042-0.792832 0.236571-1.192445 0.057544-0.316493 0.127876-0.632987 0.172633-0.952677 0.047954-0.335675 0.070332-0.674547 0.102301-1.013418 0.038363-0.390022 0.079923-0.776847 0.099104-1.170067 0.012788-0.26854 0.003197-0.53708 0.003197-0.80562 0.003197-0.460354 0.009591-0.917511-0.015985-1.377865-0.012788-0.217389-0.04156-0.434779-0.060741-0.655365-0.04156-0.498717-0.083119-1.000631-0.159845-1.499347-0.031969-0.217389-0.086316-0.428385-0.124679-0.642578-0.089513-0.489126-0.179027-0.978252-0.300509-1.460985-0.073529-0.294115-0.172633-0.581836-0.258949-0.869557-0.118285-0.396416-0.223783-0.789635-0.364447-1.182854a22.63727 22.63727 0 0 0-0.652169-1.585664c-0.060741-0.137467-0.108695-0.278131-0.172632-0.415598a23.008111 23.008111 0 0 0-1.131704-2.103562L831.322656 266.455471l31.633355-19.037557c16.796528-10.10541 22.237657-31.997802 12.132247-48.797527L769.769486 23.618719A35.750966 35.750966 0 0 0 739.296606 6.393806c-6.45135 0-12.784415 1.761494-18.321451 5.092666l-101.616758 61.150361a35.312991 35.312991 0 0 0-16.173133 21.885998 35.312991 35.312991 0 0 0 4.040886 26.911529l105.305984 175.001668c6.393806 10.626506 18.072093 17.231307 30.479274 17.231307 6.45135 0 12.784415-1.761494 18.318254-5.092667l31.633355-19.037557 141.90413 235.82914-111.306571 125.328189a22.378321 22.378321 0 0 0 1.870188 31.591795 22.282414 22.282414 0 0 0 14.852811 5.648928 22.304792 22.304792 0 0 0 16.738984-7.519116l122.121695-137.505192c0.553064-0.610608 1.067766-1.249989 1.547301-1.914945z m-234.550379-275.515494l-95.823971-159.244132 85.849633-51.658756 95.820774 159.244132-42.899241 25.814992-0.022379 0.012788-0.022378 0.015984-42.902438 25.814992z" fill="#C20C0C" p-id="6024"></path><path d="M853.812869 704.121083a13.174437 13.174437 0 0 1-4.494846 18.08488l-81.332409 48.941388a13.17124 13.17124 0 0 1-18.081683-4.494846l-48.947782-81.335606a13.177634 13.177634 0 0 1 4.498042-18.08488l81.332409-48.941388a13.177634 13.177634 0 0 1 18.084881 4.498042l48.941388 81.33241z" fill="#C20C0C" p-id="6025"></path><path d="M761.198589 795.418239a35.741376 35.741376 0 0 1-30.476076-17.231308l-48.944585-81.329212c-10.10541-16.806119-4.661085-38.695314 12.13864-48.800724l81.329213-48.941388a35.543168 35.543168 0 0 1 18.321451-5.092667c12.407181 0 24.085467 6.598408 30.476076 17.228111l48.941388 81.329212c10.108607 16.802922 4.664281 38.695314-12.135444 48.800724l-81.329212 48.941388a35.536774 35.536774 0 0 1-18.321451 5.095864z m-36.326409-113.752203l39.456177 65.565284 65.56848-39.45298-39.452979-65.568481-65.571678 39.456177z" fill="#C20C0C" p-id="6026"></path></svg>
             : null} */}
            <div className={style.songName} style={{display: 'inline'}}>{item.name} | {item.copywriter}</div>
          </Link>
        </div>
      }) : null}
    </div>
  </div>
}

export default withRouter(CardBodyRecommend)